<template>
	<view class="container">
		<Header>
			编辑资料
		</Header>
		<view class="content">
			<uni-list>
				<uni-list-item title="头像">
					<template v-slot:footer>
						<view class="uni-content">
							<uni-file-picker v-model="imageValue" disable-preview :del-icon="false" return-type="object"
								file-mediatype="image" :imageStyles="imageStyles" :auto-upload="false"
								@select="selectImgs">
								<view style="width: 30px;">选择头像</view>
							</uni-file-picker>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item title="姓名">
					<template v-slot:footer>
						<view class="uni-content">
							<uni-easyinput type="text" :clearable="false" v-model="data.nickname"></uni-easyinput>
						</view>
					</template>
				</uni-list-item>
				<picker class="picker" @change="(res) => bindPickerChange(res, 'gender')" :value="genderIdx" :range="genderList"
					range-key="name">
					<uni-list-item title="性别">
						<template v-slot:footer>
							<view class="uni-content">
								{{genderList[genderIdx] && genderList[genderIdx].name}}
							</view>
						</template>
					</uni-list-item>
				</picker>
				<picker mode="date" :value="data.birthday" @change="(res) => bindPickerChange(res, 'birthday')">
					<uni-list-item title="出生年月">
						<template v-slot:footer>
							<view class="uni-content">
								{{data.birthday}}
							</view>
						</template>
					</uni-list-item>
				</picker>
				<picker class="picker" @change="(res) => bindPickerChange(res, 'culture')" :value="cultureIdx"
					:range="cultureList" range-key="name">
					<uni-list-item title="文化程度">
						<template v-slot:footer>
							<view class="uni-content">
								{{cultureList[cultureIdx] && cultureList[cultureIdx].name}}
							</view>
						</template>
					</uni-list-item>
				</picker>
				<picker class="picker" @change="(res) => bindPickerChange(res, 'nation')" :value="nationIdx"
					:range="nationList" range-key="name">
					<uni-list-item title="民族">
						<template v-slot:footer>
							<view class="uni-content">
								{{nationList[nationIdx] && nationList[nationIdx].name}}
							</view>
						</template>
					</uni-list-item>
				</picker>
					<uni-list-item title="籍贯">
						<template v-slot:footer>
							<view class="uni-content">
								<uni-easyinput type="text" :clearable="false" v-model="data.place"></uni-easyinput>
							</view>
						</template>
					</uni-list-item>
				<uni-list-item title="详细地址">
					<template v-slot:footer>
						<view class="uni-content">
							<uni-easyinput type="textarea" autoHeight v-model="data.address"></uni-easyinput>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item title="职务">
					<template v-slot:footer>
						<view class="uni-content">
							<uni-easyinput type="text" :clearable="false" v-model="data.rank"></uni-easyinput>
						</view>
					</template>
				</uni-list-item>
				<picker class="picker" @change="(res) => bindPickerChange(res, 'circles')" :value="circlesIdx"
					:range="circlesList" range-key="name">
					<uni-list-item title="界别">
						<template v-slot:footer>
							<view class="uni-content">
								{{circlesList[circlesIdx] && circlesList[circlesIdx].name}}
							</view>
						</template>
					</uni-list-item>
				</picker>
				<picker class="picker" @change="(res) => bindPickerChange(res, 'party')" :value="partyIdx"
					:range="partyList" range-key="name">
					<uni-list-item title="党派">
						<template v-slot:footer>
							<view class="uni-content">
								{{partyList[partyIdx] && partyList[partyIdx].name}}
							</view>
						</template>
					</uni-list-item>
				</picker>
				<uni-list-item title="所在单位">
					<template v-slot:footer>
						<view class="uni-content">
							<uni-easyinput type="text" :clearable="false" v-model="data.unit_name"></uni-easyinput>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<button type="primary" class="submit-btn" @click="submitForm()">保存修改</button>
	</view>
</template>

<script>
	import Header from '../../components/header.vue'
	import request from '../../common/request.js'
	import upload from '../../common/upload.js'
	export default {
		components: {
			Header
		},
		data() {
			return {
				id: '',
				data: {},
				circlesList: [],
				circlesIdx: '0',
				partyList: [],
				partyIdx: '0',
				genderList: [{
					id: 1,
					name: '男'
				},{
					id: 0,
					name: '女'
				}],
				genderIdx: 0,
				cultureList: [],
				cultureIdx: 0,
				nationList: [],
				nationIdx: 0,
				placeList: [],
				placeIdx: 0,
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				imageValue: {},
				uploadImages: []
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		mounted() {
			this.getUserInfo()
			// this.getDataList()
		},
		methods: {
			getAge(val) {
				let currentYear = new Date().getFullYear() //当前的年份
				let calculationYear = new Date(val).getFullYear() //计算的年份
				const wholeTime = currentYear + val.substring(4) //周岁时间
				const calculationAge = currentYear - calculationYear //按照年份计算的年龄
				//判断是否过了生日
				if (new Date().getTime() > new Date(wholeTime).getTime()) {
					return calculationAge
				} else {
					return calculationAge - 1
				}
			},
			bindPickerChange(e, type) {
				switch (type) {
					case 'gender':
						this.genderIdx = e.detail.value
						break;
					case 'circles':
						this.circlesIdx = e.detail.value
						break;
					case 'party':
						this.partyIdx = e.detail.value
						break;
					case 'birthday':
						this.data.birthday = e.detail.value
						this.data.age = this.getAge(e.detail.value)
						break;
				}
			},
			getDataList() {
				request({
					url: '/proposal/dataList',
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						this.circlesList = res.data[0] && res.data[0].circlesList
						this.circlesIdx = this.circlesList.findIndex(item => item.id == this.data.circles)

						this.partyList = res.data[0] && res.data[0].partyList
						this.partyIdx = this.partyList.findIndex(item => item.id == this.data.party)

						this.cultureList = res.data[0] && res.data[0].cultureList
						this.cultureIdx = this.cultureList.findIndex(item => item.id == this.data.culture)

						this.nationList = res.data[0] && res.data[0].nationList
						this.nationIdx = this.nationList.findIndex(item => item.id == this.data.nation)
					}
				})
			},
			getUserInfo() {
				request({
					url: '/user/userInfo',
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						this.data = res.data
						this.imageValue.url = this.data.avatar
						this.genderIdx = this.genderList.findIndex(item => item.id == this.data.gender)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
					this.getDataList()
				})
			},
			selectImgs(data) {
				this.uploadImages = data.tempFilePaths
			},
			imageUpload() {
				let tasks = []
				this.uploadImages.forEach(url => {
					tasks.push(
						upload({
							url: '/common/upload',
							file: url
						})
					);
				})
				return Promise.all(tasks);
			},
			async submitForm() {
				let param = {
					nickname: this.data.nickname == null ? '' : this.data.nickname,
					gender: (this.genderList[this.genderIdx] && this.genderList[this.genderIdx].id) || '',
					birthday: this.data.birthday,
					age: this.data.age,
					culture: (this.cultureList[this.cultureIdx] && this.cultureList[this.cultureIdx].id) || '',
					nation: (this.nationList[this.nationIdx] && this.nationList[this.nationIdx].id) || '',
					place: (this.placeList[this.placeIdx] && this.placeList[this.placeIdx].id) || '',
					address: this.data.address == null ? '' : this.data.address,
					rank: this.data.rank == null ? '' : this.data.rank,
					circles: (this.circlesList[this.circlesIdx] && this.circlesList[this.circlesIdx].id) || '',
					party: (this.partyList[this.partyIdx] && this.partyList[this.partyIdx].id) || '',
					unit_name: this.data.unit_name == null ? '' : this.data.unit_name
				}
				let images = []
				if (this.uploadImages.length > 0) {
					let uploadImages = await this.imageUpload()
					uploadImages.forEach(item => {
						let imgData = JSON.parse(item)
						if (imgData.data.url) images.push(imgData.data.url)
					})
					param.avatar = images.join(',')
				}

				request({
					url: '/user/profile',
					data: param,
					method: 'POST'
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						uni.$emit('updateUser')
						this.timeout = setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-file-picker {
		width: 64px;
		margin-right: -15px;
		float: right;
	}

	::v-deep .is-input-border {
		border: none;
	}

	::v-deep .uni-easyinput__content-input {
		text-align: right;
		height: auto;
		min-height: 20px;
		padding: 0px !important;
		color: #5a5a5a;
		font-size: 14px;
	}

	::v-deep .uni-list-item__container {
		align-items: center;
		justify-content: space-between;
	}

	::v-deep .uni-list-item__content-title {
		color: #000;
	}

	::v-deep .uni-easyinput__content-textarea {
		text-align: right;
		min-height: 20px;
		padding: 0px !important;
		color: #5a5a5a;
		font-size: 14px;
		margin: 0px !important;
	}

	.uni-content {
		font-size: 14px;
		color: #5a5a5a;
		width: calc(100% - 100px);
		text-align: right;
	}

	.container {
		background-color: #f9f9f9;
		min-height: calc(100vh - 45px);
		padding-bottom: 5px;
	}

	.content {
		background-color: #fff;
		margin: 10px;
		border-radius: 10px;
		overflow: hidden;
		padding: 0px 15px;
		box-sizing: border-box;
	}

	::v-deep .uni-list--border-top,
	::v-deep .uni-list--border-bottom {
		display: none;
	}

	.submit-btn {
		font-size: 14px;
		padding: 5px;
		border-radius: 8px;
		background-color: #ea5c55;
		margin: 30px 15px;
	}
</style>